<style>
  .user_container{
    position: relative;
  }
  .user_container div.title{
    float: left;
    width: 100px;
    font-weight: 700;
    color: #666;
    text-align: left;
    
  }
  .user_container .content{
    color: #999;
    margin-left: 100px;
    padding-left: 1em;
}
  .user_container>div{
    line-height: 2em;
    height: 2em;
  }
  .user_container img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    left: 350px;
    top: 20px;
}
.user_container .col-md-1{
        height: 40px;
        padding-left: 0px;
    }
.user_container .btn-primary{
    color:#fff;
    background-color: #2cb5ac;
    font-size: 12px;
    }
    .user_container .modal-body{
      font-size: 14px;
      color: #606266;
    }

</style>

<div class="user_container">
  <div>
    <div class="title">用户名</div>
    <div class="content"></div>
  </div>
  <div>
    <div class="title">姓名</div>
    <div class="content"></div>
  </div>
  <div>
    <div class="title">手机号</div>
    <div class="content"></div>
  </div>
  <div>
    <div class="title">性别</div>
    <div class="content"></div>
  </div>
  <div>
    <div class="title">注册时间</div>
    <div class="content"></div>
  </div>
  <div>
    <div class="title">状态</div>
    <div class="content"></div>
  </div>
  <div>
    <div class="content" style="display: none;"></div>
  </div>
     <img src="./images/user.jpg" alt="">
     <div class="col-md-1">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
          修改
      </button>
      <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header"  style="border: none;">
          <h4 class="modal-title" id="exampleModalLabel" style="float: left;">修改个人信息</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
          </button>
          </div>
          <div class="modal-body">
              <form class="form-horizontal">
              <div class="form-group">
                  <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                  <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" name="username" disabled>
                  </div>
              </div>
              
              <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                  <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" name="password">
                  </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label"><span style="color: red;">*</span> 姓名</label>
                <div class="col-sm-10">
                <input type="text"  class="form-control" id="inputPassword3" name="realname">
                </div>
              </div>
              <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
                  <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputPassword3">
                  </div>
              </div>
              <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                  <div class="col-sm-10">
                  <div class="radio">
                  <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios1" value="male" checked>男
                  </label> &nbsp;&nbsp;
                  <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios2" value="female">
                  女
                  </label>
                  </div>
                  </div>
              </div>
              <div class="form-group"  style="display: none;">
                <label for="inputPassword3" class="col-sm-2 control-label">id</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="inputPassword3">
                </div>
            </div>
              </form>
          </div>
          <div class="modal-footer"  style="border-top: none;">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="save">确定</button>
          </div>
      </div>
      </div>
  </div>
  </div>
</div>


<script type="text/javascript">
//1.获取用户登录信息
  var token=sessionStorage.getItem("token");
  var Url='http://39.96.74.136:7788/user/info?token='+token;
  function getList(url){
    $.ajax({
        url:url,
        type:'get',
        headers:{
            "Authorization":sessionStorage.getItem("token")
        },
        success:function(data){
            console.log(data);
            if(data.status==200){
              var username=data.data.username;
              // console.log(username)
              $('.user_container .content').eq(0).text(username);
              var realname=data.data.realname;
              $('.user_container .content').eq(1).text(realname);
              var telephone=data.data.telephone;
              $('.user_container .content').eq(2).text(telephone);
              var gender=data.data.gender;
              if(gender=='female'){
                gender='女';
                $('.user_container .content').eq(3).text(gender);
              }else{
                gender='男';
                $('.user_container .content').eq(3).text(gender); 
              }
              var times=data.data.registerTime;
              var time=new Date(times);
              var year=time.getFullYear();  //获取年份
              var month=time.getMonth()+1;  //获取月份
              var day=time.getDate();   //获取日期
              // console.log(day)
              $('.user_container .content').eq(4).text(year+'-'+month+'-'+day);
              var status=data.data.status;
              $('.user_container .content').eq(5).text(status);

              var id=data.data.id;
              $('.user_container .content').eq(6).text(id);  
               //点击按钮获取模态框
              $('.btn-primary').click(()=>{
                  $('#myModal').modal('show');
                  //获取数据到input
                  var password=data.data.password;
                  console.log(gender)
                  $('.modal-body input').eq(0).val(username);
                  var password=$('.modal-body input').eq(1).val(password);
                  $('.modal-body input').eq(2).val(realname);
                  $('.modal-body input').eq(3).val(telephone);
                  console.log(password)
                  
                  $('.radio input:radio:first').removeAttr('checked', 'checked');
                  $('.radio input:radio:last').removeAttr('checked', 'checked');

                  if(gender=='女'){
                    $('.radio input:radio:last').prop('checked', 'checked');
                  }else{
                    $('.radio input:radio:first').prop('checked', 'checked');
                  }

                  $('.modal-body input').eq(6).val(id);

                  


              })         
            }
        }
        
    })
      //
  }
  getList(Url);
  
 
    
 
  //更新数据
  function updateData(url){
    var baseUrl='http://39.96.74.136:7788/';
    $.ajax({
        url:baseUrl+url,
        type:'post',
        headers:{
            "Authorization":sessionStorage.getItem("token")
        },
        success:function(data){
          console.log(data.message);
          getList(Url);
          $('#myModal').modal('hide');
        }
  })
  }

  $("#save").click(()=>{
      //获取相应的数据

      var id=$('.modal-body input').eq(6).val();;
      console.log(id);
      var username=$('.modal-body input').eq(0).val();
      console.log(username);
      var password=$('.modal-body input').eq(1).val();
      var realname=$('.modal-body input').eq(2).val();
      var telephone=$('.modal-body input').eq(3).val();
      var gender=$('.modal-body input[name="optionsRadios"]:checked').val();
      console.log(gender);
      //刷新数据
      updateData('baseUser/saveOrUpdate?id='+id+'&username='+username+'&password='+password+'&realname='+realname+'&telephone='+telephone+'&gender='+gender+'&status=正常');

  })


 
</script>








